<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>宿舍学生信息</title>

    <!--固定框架-->
    <link rel='stylesheet' href='../css/bootstrap.min.css'>

    <!--图标库-->
    <link rel='stylesheet' href='../css/material-design-iconic-font.min.css'>

    <!--核心样式-->
    <link rel="stylesheet" href="../css/personal_page_style.css">


    <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,200,500,600,700' rel='stylesheet' type='text/css'>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <link rel="stylesheet" href="../css/material-cards.css">
    <style type="text/css">
        html {
            position: relative;
            min-height: 100%;
        }
        
        body {
            background-color: #ECEFF1;
            color: #37474F;
            font-family: 'Raleway', sans-serif;
            font-weight: 300;
            font-size: 16px;
        }
        
        h1,
        h2,
        h3 {
            font-weight: 200;
        }
    </style>
    <!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>

    <div id="viewport">

        <!-- Sidebar -->
        <div id="sidebar">
            <header>
                <a href="#">个人中心</a>
            </header>
            <ul class="nav">

                <li>
                    <img src="../images/1.jpg" alt="" />
                    <span>欢迎您! 管理员</span>
                </li>

                <li>
                    <a href="../myweb/personal_page.html">
                        <i class="zmdi zmdi-view-dashboard"></i> 返回首页
                    </a>
                </li>
                <li>
                    <a href="../myweb/shopping.html">
                        <i class="zmdi zmdi-link"></i> 商城购物
                    </a>
                </li>
                <li>
                    <a href="../myweb/student_information.html">
                        <i class="zmdi zmdi-widgets"></i> 宿舍信息
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="zmdi zmdi-calendar"></i> 宿舍费用查询与缴纳
                    </a>
                </li>

                <li>
                    <a href="../myweb/personal_page_communication.html">
                        <i class="zmdi zmdi-settings"></i> 留言板
                    </a>
                </li>
                <li>
                    <a href="../myweb/worker.html">
                        <i class="zmdi zmdi-comment-more"></i> 联系我们
                    </a>
                </li>
            </ul>



            <script type="text/javascript">
                $(".sidebar li a").each(function() {
                    //window.location.href对象用于获得当前页面的地址 (URL)，
                    //String() 函数把对象的值转换为字符串    
                    if ($(this)[0].href == String(window.location)) {
                        //一级菜单高亮
                        $(this).closest('ul').parent("li").addClass("on").siblings().removeClass("on");
                    }
                });
            </script>

        </div>

        <!-- Content -->
        <div id="content">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#"><i class="zmdi zmdi-notifications text-danger"></i></a>
                        </li>
                        <li><a href="#">账户退出</a></li>
                    </ul>

                </div>
            </nav>
            <div class="container-fluid">




                <div class="htmleaf-container">
                    <section class="container">
                        <div class="page-header">
                            <h1>宿舍学生信息<br>
                        </div>
                        <div class="row active-with-click">
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <article class="material-card Red">
                                    <h2>
                                        <span>梁鑫</span>
                                        <strong>
                                            <i class="fa fa-fw fa-star"></i>
                                            计科1803班
                                        </strong>
                                    </h2>
                                    <div class="mc-content">
                                        <div class="img-container">
                                            <img class="img-responsive" src="../images/s1.jpg">
                                        </div>
                                        <div class="mc-description">
                                            <span>学号：18408030316</span><br>
                                            <span>宿舍号：8232</span><br>
                                            <span>床位号：1号</span><br>

                                        </div>
                                    </div>
                                    <a class="mc-btn-action">
                                        <i class="fa fa-bars"></i>
                                    </a>
                                    <div class="mc-footer">
                                        <h4>
                                            Social
                                        </h4>
                                        <a class="fa fa-fw fa-facebook"></a>
                                        <a class="fa fa-fw fa-twitter"></a>
                                        <a class="fa fa-fw fa-linkedin"></a>
                                        <a class="fa fa-fw fa-google-plus"></a>
                                    </div>
                                </article>
                            </div>
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <article class="material-card Pink">
                                    <h2>
                                        <span>李学立</span>
                                        <strong>
                                            <i class="fa fa-fw fa-star"></i>
                                            计科1803班
                                        </strong>
                                    </h2>
                                    <div class="mc-content">
                                        <div class="img-container">
                                            <img class="img-responsive" src="../images/li.jpg">
                                        </div>
                                        <div class="mc-description">
                                            <span>学号：18408030317</span><br>
                                            <span>宿舍号：8232</span><br>
                                            <span>床位号：2号</span><br>
                                        </div>
                                    </div>
                                    <a class="mc-btn-action">
                                        <i class="fa fa-bars"></i>
                                    </a>
                                    <div class="mc-footer">
                                        <h4>
                                            Social
                                        </h4>
                                        <a class="fa fa-fw fa-facebook"></a>
                                        <a class="fa fa-fw fa-twitter"></a>
                                        <a class="fa fa-fw fa-linkedin"></a>
                                        <a class="fa fa-fw fa-google-plus"></a>
                                    </div>
                                </article>
                            </div>
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <article class="material-card Purple">
                                    <h2>
                                        <span>边文凯</span>
                                        <strong>
                                            <i class="fa fa-fw fa-star"></i>
                                           计科1803班
                                        </strong>
                                    </h2>
                                    <div class="mc-content">
                                        <div class="img-container">
                                            <img class="img-responsive" src="../images/bian.jpg">
                                        </div>
                                        <div class="mc-description">
                                            <span>学号：18408030318</span><br>
                                            <span>宿舍号：8232</span><br>
                                            <span>床位号：3号</span><br>
                                        </div>
                                    </div>
                                    <a class="mc-btn-action">
                                        <i class="fa fa-bars"></i>
                                    </a>
                                    <div class="mc-footer">
                                        <h4>
                                            Social
                                        </h4>
                                        <a class="fa fa-fw fa-facebook"></a>
                                        <a class="fa fa-fw fa-twitter"></a>
                                        <a class="fa fa-fw fa-linkedin"></a>
                                        <a class="fa fa-fw fa-google-plus"></a>
                                    </div>
                                </article>
                            </div>
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <article class="material-card Deep-Purple">
                                    <h2>
                                        <span>杨佳龙</span>
                                        <strong>
                                            <i class="fa fa-fw fa-star"></i>
                                            计科1803班
                                        </strong>
                                    </h2>
                                    <div class="mc-content">
                                        <div class="img-container">
                                            <img class="img-responsive" src="../images/yang.jpg">
                                        </div>
                                        <div class="mc-description">
                                            <span>学号：18408030315</span><br>
                                            <span>宿舍号：8232</span><br>
                                            <span>床位号：4号</span><br>
                                        </div>
                                    </div>
                                    <a class="mc-btn-action">
                                        <i class="fa fa-bars"></i>
                                    </a>
                                    <div class="mc-footer">
                                        <h4>
                                            Social
                                        </h4>
                                        <a class="fa fa-fw fa-facebook"></a>
                                        <a class="fa fa-fw fa-twitter"></a>
                                        <a class="fa fa-fw fa-linkedin"></a>
                                        <a class="fa fa-fw fa-google-plus"></a>
                                    </div>
                                </article>
                            </div>
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <article class="material-card Indigo">
                                    <h2>
                                        <span>Edward Norton</span>
                                        <strong>
                                            <i class="fa fa-fw fa-star"></i>
                                            American History X
                                        </strong>
                                    </h2>
                                    <div class="mc-content">
                                        <div class="img-container">
                                            <img class="img-responsive" src="img/thumb-edward-norton.jpg">
                                        </div>
                                        <div class="mc-description">
                                            He has been nominated for three Academy Awards for his work in the films Primal Fear, American History X and Birdman. He also starred in other roles ...
                                        </div>
                                    </div>
                                    <a class="mc-btn-action">
                                        <i class="fa fa-bars"></i>
                                    </a>
                                    <div class="mc-footer">
                                        <h4>
                                            Social
                                        </h4>
                                        <a class="fa fa-fw fa-facebook"></a>
                                        <a class="fa fa-fw fa-twitter"></a>
                                        <a class="fa fa-fw fa-linkedin"></a>
                                        <a class="fa fa-fw fa-google-plus"></a>
                                    </div>
                                </article>
                            </div>
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <article class="material-card Blue">
                                    <h2>
                                        <span>Michael Caine</span>
                                        <strong>
                                            <i class="fa fa-fw fa-star"></i>
                                            Educated Rita
                                        </strong>
                                    </h2>
                                    <div class="mc-content">
                                        <div class="img-container">
                                            <img class="img-responsive" src="img/thumb-michael-caine.jpg">
                                        </div>
                                        <div class="mc-description">
                                            English actor and author. Renowned for his distinctive working class cockney accent, Caine has appeared in over 115 films and is regarded as a British ...
                                        </div>
                                    </div>
                                    <a class="mc-btn-action">
                                        <i class="fa fa-bars"></i>
                                    </a>
                                    <div class="mc-footer">
                                        <h4>
                                            Social
                                        </h4>
                                        <a class="fa fa-fw fa-facebook"></a>
                                        <a class="fa fa-fw fa-twitter"></a>
                                        <a class="fa fa-fw fa-linkedin"></a>
                                        <a class="fa fa-fw fa-google-plus"></a>
                                    </div>
                                </article>
                            </div>
                        </div>
                    </section>

                </div>

                <script src="../js/jquery-2.1.1.min.js"></script>
                <script>
                    $(function() {
                        $('.material-card > .mc-btn-action').click(function() {
                            var card = $(this).parent('.material-card');
                            var icon = $(this).children('i');
                            icon.addClass('fa-spin-fast');

                            if (card.hasClass('mc-active')) {
                                card.removeClass('mc-active');

                                window.setTimeout(function() {
                                    icon
                                        .removeClass('fa-arrow-left')
                                        .removeClass('fa-spin-fast')
                                        .addClass('fa-bars');

                                }, 800);
                            } else {
                                card.addClass('mc-active');

                                window.setTimeout(function() {
                                    icon
                                        .removeClass('fa-bars')
                                        .removeClass('fa-spin-fast')
                                        .addClass('fa-arrow-left');

                                }, 800);
                            }
                        });
                    });
                </script>










            </div>
        </div>

    </div>

</body>

</html>